<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,user-scalable=no" />
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
	margin: 0;
}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}	
.wrap {
	width: 100vw;
	height: 200px;
	overflow: hidden;
}
.select {
	position: absolute;
	top: 80px;
	left: 0;
	box-sizing: border-box;
	width: 100vw;
	height: 40px;
	border: 1px solid #000;
}
.list {
	margin-top: 80px;
}
.list li {
	font: 20px/40px "宋体";
	text-align: center;
}
</style>
</head>
<body>
<div class="wrap">
	<ul class="list">
		<li class="list-item">1</li>
		<li class="list-item">2</li>
		<li class="list-item">3</li>
		<li class="list-item">4</li>
		<li class="list-item disabled-item">5</li>
		<li class="list-item">6</li>
		<li class="list-item">7</li>
		<li class="list-item">8</li>
	</ul>
	<div class="select"></div>
</div>
<script src="js/bscroll.js"></script>
<script>
{
    let wrap = document.querySelector(".wrap");
    let wheel = new BScroll(wrap,{
        wheel: {
            selectedIndex: 0,
            rotate: 30,
            adjustTime: 200,
            wheelWrapperClass: 'wrap',
            wheelItemClass: 'list-item',
            wheelDisabledItemClass: 'disabled-item'
        }
    }); 
    wheel.on("scrollEnd",()=>{
        console.log("完成选中");
        console.log(wheel.getSelectedIndex());
    });
    setTimeout(()=>{ //滚动到索引对应的位置啦啦
        wheel.wheelTo(3);
    },3000);
}
</script>
</body>
</html>